<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>吉联科技</title>
    <link rel="stylesheet" href="css/unit.css"/>
    <link rel="stylesheet" href="components/header.css"/>
    <link rel="stylesheet" href="components/jianjie.css"/>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="components/footer.css"/>
</head>
<body>
<div id="app">
    <header>
        <nav class="container">
            <img src="img/logo.png" alt=""/>
            <ul>
                <li><a  href="index.html">首页</a></li>
                <li><a class="active" href="jianjie.html">分部简介</a></li>
                <li><a href="product.html">硬件产品</a></li>
                <li><a href="card.html">软件产品</a></li>
                <li><a href="case.html">成功案例</a></li>
                <li><a href="download.html">下载中心</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <el-carousel :interval="5000" trigger="click" height='700px' >
        <el-carousel-item>
            <img src="img/banner1.jpg" alt=""/>
        </el-carousel-item>
        <el-carousel-item>
            <img src="img/banner2.jpg" alt=""/>
        </el-carousel-item>
    </el-carousel>


    <div class="container jianjie">
        <div class="tabs">
            <div class="title">
                分部简介
            </div>
            <ul>
                <li @click="tab(index)" v-for="(item,index) in lis" :class="[{active:index==tindex}]" >
                    {{item}}
                    <span>></span>
                </li>
            </ul>
        </div>
        <component :is='com'></component>
    </div>



    <footer>
        <div class="container foot">
            <div class="f_left">
                <ul>
                    <li>领航</li>
                    <li>微信订房</li>
                    <li>微信订餐</li>
                    <li>移动查房</li>
                    <li>OTA全接通</li>
                    <li>手机报表</li>
                </ul>

                <p>公司地址:成都市青羊区顺城大街308号冠城广场21B</p>
                <p>电话:4008-846-665 028-86723736 传真:028-86723736-801</p>
                <p>版权所有©2020四川吉联科技有限公司</p>
            </div>
            <ul class="f_right">
                <li>微信服务号</li>
                <li><img src="img/erweima.jpg" alt=""/></li>
            </ul>
        </div>
    </footer>
</div>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</body>
</html>
<script>
    Vue.component('blokc1',{
        template:`<div class="contents">
    <h3>概况</h3>
    <div class="text">
    <p>&emsp;&emsp;高新区吉联电子经营部，是一家集研发、制造、销售和售后服务一体的高新技术分部。拥有一批高素质的员工队伍，雄厚的技术力量，多年致力于一卡通，停车场，电子门票系统设备研发生产，在全国同行业中处于领先地位。</p>
    <p>&emsp;&emsp;吉联产品系列广泛应用于教育、金融、科研、生产等行业，形成丰富的产品结构。在西南地区拥有用户2000余家。</p>
    <p>&emsp;&emsp;吉联确立“以人为本、精益求精”为企业思想，“树一流品质，创完美服务”为企业宗旨，以科技求发展、以质量求效益，为用户提供高品质产品！树立“吉联”精品品牌。</p>
    </div>
    </div>`
    })
    Vue.component('blokc2',{
        template:` <div class="contents">
    <img src="img/jiudian.jpg" alt="">
    </div>`
    })
    Vue.component('blokc3',{
        template:`<div class="contents">
    <h3>经营理念</h3>
    <div class="text">
    <p>&emsp;&emsp;公司精神--尚知、敬业、协作、发展</p>
    <p>&emsp;&emsp;◎一个好学、向上、对工作孜孜不倦的敬业团队，是我们无往不胜的有力保证，我们关怀人性，也关注未来。</p>
    <p>&emsp;&emsp;◎为了探求人生的价值，我们快乐；为了追求卓越的梦想，我们激情。</p>
    <p>&emsp;&emsp;◎以开放的姿态配合顾客进行充分的交流沟通，迅速准确的进行市场信息的传达和分析，满足顾客需求。</p>
    <p>&emsp;&emsp;◎以不断创新的理念和对企业的奉献精神，做为我们管理的指南，最大程度上体现理念的前瞻性，使公司得到可持续发展。</p>
    <p>&emsp;&emsp;行为准则--激情工作、快乐生活</p>
    <p>&emsp;&emsp;◎人人都自觉自发对工作进行自检，视工作为乐趣，并为自己每天的一点点进步而感到自豪。</p>
    <p>&emsp;&emsp;◎视工作为乐趣、让生活更激情！激情工作、快乐生活！这条吉联人倡导的理念，时时刻刻影响着每一位吉联人。</p>
    <p>&emsp;&emsp;服务标准--有求必应，专业，规范</p>
    <p>&emsp;&emsp;◎用开放的思想和灵活的行为满足客户需求，获得更好的服务效果。</p>
    <p>&emsp;&emsp;◎及时响应、专业咨询、规范的流程设计及最终精美的产品。</p>
    </div>
    </div>`
    })
    Vue.component('blokc4',{
        template:`<div class="contents">
    <img src="img/jiudian.jpg" alt="">
    </div>`
    })
    new Vue({
        el: '#app',
        data: function() {
            return {
                tindex:0,
                tabs:['blokc1','blokc2','blokc3','blokc4'],
                com:'blokc1',
                lis:['分部概况','组织结构','经营理念','荣誉资质']
            }
        },
        methods:{
            tab(index){
        this.tindex=index;
        this.com=this.tabs[index];
    }
    }
    })




</script>

















